<script setup>
import { reactive } from 'vue'
const state = reactive({ editFlag: false})
const formState = reactive({ username: '', phone: '', email: '' })
</script>
<template>
  <a-row :gutter="[16,16]">
    <a-col :span="12">
      <a-card hoverable>
        <template #cover>
          <div class="profile">
            <a-avatar :size="200">
              <template #icon>
                <aliwangwang-outlined />
              </template>
            </a-avatar>
            <div class="name"><idcard-outlined /> Admin</div>
            <a-tag color="success">success</a-tag>
          </div>
        </template>
        <transition name="cycle" mode="out-in">
          <!-- 显示 -->
          <a-descriptions v-if="!state.editFlag" bordered title="用户信息" :column="1">
            <template #extra>
              <a-button @click="state.editFlag=!state.editFlag">
                <template #icon><edit-outlined /></template>
              </a-button>
            </template>
            <a-descriptions-item label="姓名">张三</a-descriptions-item>
            <a-descriptions-item label="手机号">13788888899</a-descriptions-item>
            <a-descriptions-item label="电子邮件">hi.superadmin@gmail.com</a-descriptions-item>
            <a-descriptions-item label="签名">张三</a-descriptions-item>
          </a-descriptions>
          <!-- 修改 -->
          <a-form
            v-else
            v-bind="{
              labelCol: { style: { width: '150px'}},
              wrapperCol: { span: 14 },
            }">
            <a-form-item label="用户名" name="username">
              <a-input v-model:value="formState.username" size="large">
                <template #prefix>
                  <user-outlined />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="手机号" name="phone">
              <a-input v-model:value="formState.phone" size="large">
                <template #prefix>
                  <phone-outlined />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="电子邮件" name="email">
              <a-input v-model:value="formState.email" size="large">
                <template #prefix>
                  <comment-outlined />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="签名" name="email">
              <a-input v-model:value="formState.email" size="large">
                <template #prefix>
                  <comment-outlined />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
              <a-button type="primary" html-type="submit" @click="state.editFlag=!state.editFlag">修改</a-button>
              <a-button style="margin-left: 10px" @click="state.editFlag=!state.editFlag">Cancel</a-button>
            </a-form-item>
          </a-form>
        </transition>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card title="成长轨迹" hoverable>
        <template #extra><a href="#">更多</a></template>
        <a-timeline>
          <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
          <a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item>
          <a-timeline-item>Technical testing 2015-09-01</a-timeline-item>
          <a-timeline-item>Network problems being solved 2015-09-01</a-timeline-item>
        </a-timeline>
      </a-card>
    </a-col>
  </a-row>
</template>
<style lang="less" scoped>
.profile {
  text-align: center;margin: 20px auto;
  .name {
    font-size: 24px;
    font-weight: bold;
  }
}
.cycle-enter-active,.cycle-leave-active{
  transition: all 0.5s;
}
.cycle-enter-from,.cycle-leave-to{
  transform: translateY(-20px);
  opacity: 0;
}
.cycle-enter-to,.cycle-leave-from{
  transition: all 0.5s;
}
</style>